Page history of CSS 프레임워크와 CSS class 이름 짓기

부트스트랩 4가 beta가 되면서 유틸리티 클래스가 상당히 풍부해졌다. 어지간한 건 죄다 클래스 조립만으로 해결할 수 있을 정도. 그 사이 부트스트랩의 대안을 찾고자 semantic ui 등을 검토해봤지만 부트스트랩이 가장 우월하다고 판단된다. 부트스트랩과 sass, vue.js의 scoped style을 중심으로 컴포넌트 기반 디자인을 하게 되면 커스텀으로 작성해야 하는 css의 양을 대폭 줄일 수 있을 듯. 지금 하고 있는 프로젝트는 sass를 씀에도 불구하고 scss 파일이 무려 7천 라인을 넘기고 있는데, 내 스타일대로 디자인이 들어갔으면 아마도 1천 라인 이내에서 구현 가능했을 듯. 지금 체제에서도 2천 라인까지는 줄일 수 있을 것 같아서 2천 라인을 목표로 리팩토링하는 중인데, 쉽지 않을 것 같다.

css 클래스명 규칙에 대해 여러 가지 방식이 있지만 아마 가장 크게 충돌하는 것은 context를 반영해서 이름지을 것이냐, 아니면 뷰 형태에 따른 이름을 지을 것이냐다. 예를 들어, 테이블에 합계를 보여주는 셀이 있어서 우측 정렬을 해야 한다면 그 셀의 의미를 반영해서 sum이라고 지을 것이냐, 아니면 number-cell이라고 지을 것이냐, 혹은 text-right라고 지을 것이냐다.

코드량을 생각하면 후자로 갈수록 유리하다. 전자의 결정적인 문제는 평균을 나타내는 필드를 추가해야 할 때다. 이 때 셀 이름을 average라고 짓고 또 text-align: right를 추가할 것인가? 이 경우 number-cell과 text-right는 그대로 재활용 가능하다.

sass는 전자의 방식도 중복 코드가 늘어나지 않게 도와주지만, 대신 mixin 등을 써야 해서 복잡도를 대가로 치러야 한다. 하지만 후자의 접근법들은 아무런 대가도 치르지 않는다. 그리고, 전자의 관점으로 코딩하면 sass를 리팩토링해가면서 공통 스타일을 뽑아내기보다는 sum 따로 average 따로 코딩해둔 채 방치될 가능성이 더 높다.

중복이 일어나기 쉽다는 것은 변경에 취약하다는 것이다. 어느 날 갑자기 숫자는 전부 파란색으로 보여주기로 했다면 sum과 average 모두에 스타일을 추가해야 한다. 공통 스타일을 빼내서 상속해두지 않았다면 골치아픈 일이 발생한다.

그럼 number-cell와 text-right는 어느 쪽이 유리한가. 앞서의 경우처럼 숫자를 전부 메인 컬러로 하고 싶으면 number-cell은 자기 스타일만 추가하면 된다. 하지만 text-right는 모든 숫자 셀의 클래스명에 text-primary 같은 걸 추가해야 한다. 작업량은 전자가 적다. 반면 숫자 중에 하나만 가운데 정렬을 하고 싶다면 어떨까? text-right는 대신 text-center를 붙여주면 된다. 하지만 number-cell은 이 때 클래스의 추가가 필요해진다. 둘다 장단점이 있는 셈이다. 이 두 가지 접근법은 경우에 따라 둘다 유효한 접근법이 될 수 있다.

그럼 언제 number-cell을 쓰고 언제 text-right를 쓸 것인가? 나는 한두 개의 작은 스타일이 필요할 때는 text-right 접근법을 쓰고, 컴포넌트라고 할 정도로 단위가 커지면 number-cell 접근법을 쓴다. 이 때 부트스트랩의 유틸리티가 매우 좋다. color, border, margin, padding, align, display 등의 간단한 속성이 미리 정의가 되어 있기 때문에 손쉽게 갖다 붙일 수 있다. 그래서, 부트스트랩에 있는 스타일은 되도록 css 파일에 직접 기술하지 않고 클래스만 조립해 붙이는 것을 우선하고, 이걸로 부족해질 경우 컴포넌트로 취급해서 별도의 클래스를 부여한다.

vue.js를 비롯한 리액티브 프로그래밍 덕분에 자바스크립트만을 위해 클래스명을 붙일 필요는 없어졌다. 이제 클래스명은 매우 신중하게 디자인 컴포넌트 단위로 붙여야 한다. 스타일 한 줄 넣기 위해 클래스 이름을 짓고 있다면 잠시 멈추고 다시 생각해보자.